<!DOCTYPE html>

<html>

<head>
  <title>Example 02.06 - Mesh Properties</title>
  <script src="https://cdn.bootcss.com/three.js/r83/three.js"></script>

  <script type="text/javascript" src="../libs/stats.js"></script>
  <script type="text/javascript" src="../libs/dat.gui.js"></script>
  <style>
    body {
      /* set margin to 0 and overflow to hidden, to go fullscreen */
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        var scene = new THREE.Scene()

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)

        var renderer = new THREE.WebGLRenderer()
        renderer.setClearColor(0xefefef, 1)
        renderer.setSize(window.innerWidth, window.innerHeight)

        var planeGeometry = new THREE.PlaneGeometry(60, 40, 1)
        var planeMaterial = new THREE.MeshLambertMaterial({
            color: 0xffffff
        })
        var plane = new THREE.Mesh(planeGeometry, planeMaterial)
        plane.receiveShadow = true

        plane.rotation.x = -0.5 * Math.PI
        plane.position.x = 0
        plane.position.y = 0
        plane.position.z = 0

        scene.add(plane)

        var axis = new THREE.AxisHelper(30)
        scene.add(axis)

        camera.position.x = -30
        camera.position.y = 40
        camera.position.z = 30
        camera.lookAt(scene.position)

        //环境光 不会产生阴影
        var ambientLight = new THREE.AmbientLight(0x0c0c0c)
        scene.add(ambientLight)

        //点光源
        var spotLight = new THREE.SpotLight(0xffffff)
        spotLight.position.set(-40, 60, 20)
        spotLight.castShadow = true
        scene.add(spotLight)

        var material = new THREE.MeshLambertMaterial({
            color: 0x00ff00
        })
        var geo = new THREE.BoxGeometry(5, 8, 3)
        var cube = new THREE.Mesh(geo, material)
        cube.position.y = 4
        cube.castShadow = true
        scene.add(cube)

        document.getElementById('WebGL-output').appendChild(renderer.domElement)


        var step = 0

        var controls = new function () {
            this.scaleX = 1
            this.scaleY = 1
            this.scaleZ = 1

            this.positionX = 0
            this.positionY = 4
            this.positionZ = 0

            this.rotationX = 0
            this.rotationY = 0
            this.rotationZ = 0
            this.scale = 1

            this.translateX = 0
            this.translateY = 0
            this.translateZ = 0

            this.visible = true

            this.translate = function (obj) {
                obj.translateX(controls.translateX)
                obj.translateY(controls.translateY)
                obj.translateZ(controls.translateZ)

                controls.positionX = cube.position.x
                controls.positionY = cube.position.y
                controls.positionZ = cube.position.z
            }
        }

        var gui = new dat.GUI()

        var guiScale = gui.addFolder('scale')
        guiScale.add(controls, 'scaleX', 0, 5)
        guiScale.add(controls, 'scaleY', 0, 5)
        guiScale.add(controls, 'scaleZ', 0, 5)

        var guiPosition = gui.addFolder('position')
        var contX = guiPosition.add(controls, 'positionX', -10, 10)
        var contY = guiPosition.add(controls, 'positionY', -4, 20)
        var contZ = guiPosition.add(controls, 'positionZ', -10, 10)

        contX.listen()
        contX.onChange(function (vale) {
            cube.position.x = controls.positionX
        })

        contY.listen()
        contY.onChange(function (vale) {
            cube.position.y = controls.positionY
        })
        contZ.listen()
        contZ.onChange(function (vale) {
            cube.position.z = controls.positionZ
        })

        var guiRotation = gui.addFolder('rotation')
        guiRotation.add(controls, 'rotationX', -4, 4)
        guiRotation.add(controls, 'rotationY', -4, 4)
        guiRotation.add(controls, 'rotationZ', -4, 4)

        var guiTranslate = gui.addFolder('translate')
        guiTranslate.add(controls, 'translateX', -10, 10)
        guiTranslate.add(controls, 'translateY', -10, 10)
        guiTranslate.add(controls, 'translateZ', -10, 10)
        guiTranslate.add(controls, 'translate')

        gui.add(controls, 'visible')

        var stats = initStats()

        function initStats() {
            var stats = new Stats()
            stats.setMode(0)
            stats.domElement.style.position = 'absolute'
            stats.domElement.style.left = '0'
            stats.domElement.style.right = '0'
            document.getElementById('Stats-output').appendChild(stats.domElement)
            return stats
        }

        function render() {
            stats.update()
            cube.visible = controls.visible

            cube.rotation.x = controls.rotationX
            cube.rotation.y = controls.rotationY
            cube.rotation.z = controls.rotationZ

            cube.scale.set(controls.scaleX, controls.scaleY, controls.scaleZ)

            requestAnimationFrame(render)
            renderer.render(scene, camera)
        }

        render()


    }

    window.onload = init


</script>
</body>
</html>
